<template>
  <!-- :后面，紫色的地方，对应的是属性 -->
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    sort-by="id"
    class="elevation-1"
    item-key="id"
    show-select
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>测试用例</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
          <v-btn 
          color="green" 
          dark 
          class="mb-2" 
          @click="executeCase"
          >执行用例</v-btn>

        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">新建用例</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h5">{{ formTitle }}</span>
            </v-card-title>
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.node_id" label="nodeId"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.remark" label="备注"></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">取消</v-btn>
              <v-btn color="blue darken-1" text @click="save">保存</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-dialog v-model="dialogDelete" max-width="500px">
          <v-card>
            <v-card-title class="text-h5">确认删除这个用例吗?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
              <v-btn color="blue darken-1" text @click="deleteItemConfirm">确定</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
      <v-icon small @click="deleteItem(item)">mdi-delete</v-icon>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data: () => ({
    singleSelect: false,
    selected: [],
    dialog: false,
    dialogDelete: false,
    headers: [
      {
        text: "用例ID",
        align: "start",
        sortable: false,
        value: "id"
      },
      { text: "nodeId", value: "node_id" },
      { text: "用例备注", value: "remark" },
      { text: "操作", value: "actions", sortable: false }
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      id: "",
      node_id: '',
      remark: ''
    },
    defaultItem: {
      name: "",
      calories: 0,
      fat: 0,
      carbs: 0,
      protein: 0
    }
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增用例" : "编辑用例";
    }
  },

  watch: {
    dialog(val) {
      val || this.close();
    },
    dialogDelete(val) {
      val || this.closeDelete();
    }
  },

  created() {
    this.initialize();
  },

  methods: {
    initialize() {
      // then 等待获取4到接口的响应信息
      this.$api.testcase.getTestcase({}).then((result) => {
        console.log(result)
        // 展示的数据信息尽量与接口的返回信息能一一对应，要不然需要做
        // 数据的二次处理
        this.desserts = result["data"]['data']

      }).catch((err) => {
        console.log(err)
      });

    },

    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialogDelete = true;
    },

    deleteItemConfirm() {
      console.log("删除用例执行这里");
      let delId = this.editedItem["id"]
      // 有一些接口需要传入接口信息，在调用接口函数传入
      this.$api.testcase.deleteTestcase({c_id: delId}).then((result) => {
        console.log(result)
        // 当拿到接口的响应值之后应该刷新页面
        this.initialize()
      })
      this.closeDelete();
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    closeDelete() {
      this.dialogDelete = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    save() {
      if (this.editedIndex > -1) {
        console.log("编辑用例");
        this.$api.testcase.updateTestcase(this.editedItem).then((result) => {
          console.log(result)
          this.initialize()
        })
        // Object.assign(this.desserts[this.editedIndex], this.editedItem)
      } else {
        // 调用新建用例接口
        const caseData = {
          'node_id': this.editedItem['node_id'],
          'remark': this.editedItem['remark']
        }
        console.log(caseData)
        this.$api.testcase.addTestcase(caseData).then((result) => {
          console.log(result)
          this.initialize()
        })
        // this.desserts.push(this.editedItem)
      }
      this.close();
    },
    executeCase(){
      // 执行测试用例，同时新增一条任务记录
      console.log(this.selected)
      this.$api.task.addTask(this.selected).then((result) => {
        console.log(result)
        // 提升用户体验，用例执行完成之后给予提示
        if(result.data.code===0){
          alert("用例执行成功，请到测试任务页面进行查看")
        }
        else{
          alert("用例未执行成功，请检查日志信息")
        }
      })
    }
    
  }
};
</script>